Skip to content

Conversation

@adbharadwaj
Copy link
Contributor

@adbharadwaj adbharadwaj commented Oct 13, 2025

What we want:
Screenshot 2025-10-13 at 12 11 48 PM

What we get without this change: (all fill colors to try)
Screenshot 2025-10-13 at 12 12 42 PM
Screenshot 2025-10-13 at 12 13 02 PM
Screenshot 2025-10-13 at 12 13 11 PM

return (
<svg className={className} width={width} height={height} viewBox={viewBox} style={style} xmlns="http://www.w3.org/2000/svg">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z" fill={color} />
<path d="M7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z" fill={checkColor || 'transparent'} />
Copy link
Contributor Author

@adbharadwaj adbharadwaj Oct 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

allows me to control the color of the checkmark separately from fill color and background color.

function Check (props) {
const path = 'M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z'
return <Icon path={path} {...props} />
function Check ({ color, className, path, viewBox, width, height, style, checkColor }) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest setting some defaults here like width, height and viewBox

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wont do it in this case because we do not set defaults for them in case of other icons.

@adbharadwaj adbharadwaj merged commit 64aa4b0 into main Oct 15, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants